<template>
  <div class="ele-body" v-if="activeName==='service'">
    <div class="topWrap">
      <div v-for="item in topData" :key="item.title" class="topItemStyle">
        <div :style="[{fontWeight: 800,background: styleKey[item.title].bg}]" class="topItemTitle">{{ item.title }}
        </div>
        <div class="compareWrap">
          <div class="topItemValue">目标值： <span
            :style="[{color: styleKey[item.title].fc,fontSize:'18px'}]">{{ item.target }}</span></div>
          <div class="topItemValue">实际值： <span
            :style="[{color: styleKey[item.title].fc,fontSize:'18px'}]">{{ item.realValue }}</span></div>
        </div>
        <div class="sortWrap">
          <div v-for="(sortData,index) in item.items" :key="index" class="sortItemStyle">
            <div    class="sortItemTitle">{{ sortData.title }}</div>
            <div class="sortItemValue" >{{ sortData.url }}</div>
          </div>
        </div>
      </div>
    </div>
    <div id="lineChart"></div>
    <div class="bottomWrap">
      <el-table
        :data="tableData"
        stripe
        style="width: 100%">
        <el-table-column
          prop="date"
          label="日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  props:['activeName'],
  data() {
    return {
      echartsGroup:[],
      styleKey: {
        '10分钟响应率': {bg: '#e4f4ef', fc: '#1fa881'},
        '4小时到位率': {bg: '#e6edfa', fc: '#0754cf'},
        '24小时完工率': {bg: '#fff5d6', fc: '#fed13b'},
        '服务满意度': {bg: '#e1e8ff', fc: '#607ad8'},
      },
      topData: [
        {
          title: '10分钟响应率',
          target: '90%',
          realValue: '80%',
          items: [
            {title: '销售产品', url: '#'},
            {title: '销售税条件', url: '#'},
            {title: '销售合计', url: '#'}
          ]
        },
        {
          title: '4小时到位率',
          target: '90%',
          realValue: '80%',
          items: [
            {title: '税务类别', url: '#'},
            {title: '税务标准', url: '#'},
            {title: '税务描述', url: '#'}
          ]
        },
        {
          title: '24小时完工率',
          target: '90%',
          realValue: '80%',
          items: [
            {title: '税务类别', url: '#'},
            {title: '税务标准', url: '#'},
            {title: '税务描述', url: '#'}
          ]
        },
        {
          title: '服务满意度',
          target: '90%',
          realValue: '80%',
          items: [
            {title: '税务类别', url: '#'},
            {title: '税务标准', url: '#'},
            {title: '税务描述', url: '#'}
          ]
        }
      ],
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  methods: {
    initChart(){
      const chartDom = document.getElementById('lineChart');
      const myChart1 = echarts.init(chartDom);
      this.echartsGroup.push(myChart1)
      let option;
      option = {
        title: {
          text: 'Stacked Line'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: 'Union Ads',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: 'Video Ads',
            type: 'line',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: 'Direct',
            type: 'line',
            stack: 'Total',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: 'Search Engine',
            type: 'line',
            stack: 'Total',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      };
      // window.addEventListener("resize", function () {
      //   myChart.resize();
      // });
      option && myChart1.setOption(option);
    },
  },
  mounted() {
    // console.log(11)
    // this.initChart()
  }
};
</script>
<style lang="scss" scoped>
@import "src/styles/conversion.scss";
.ele-body{
  font-size: px2vh(16);
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.topWrap {
  display: flex;
  justify-content: space-around;
}

.topItemStyle {
  box-sizing: border-box;
  background: #fff;
  width: px2vw(340);
  height: px2vh(200);
  padding: px2vh(5) px2vw(10);
  border-radius: 20px;
}

.topItemTitle {
  line-height: px2vh(26);
  margin-top: px2vh(5);
  border-radius: px2vh(5);
  height: px2vh(42);
  box-sizing: border-box;
  display: block;
  width: 100%;
  padding: px2vh(10) px2vw(20);
}

.compareWrap {
  font-size: px2vh(14);
  display: flex;
  justify-content: space-around;
  margin-top: px2vh(10);
  margin-bottom: px2vh(15);
}

.sortWrap {
  display: flex;
  justify-content: space-around;
}

.sortItemStyle {
    width: px2vw(80);
    height: px2vh(60);
    .sortItemTitle{
      @include flex-center;
      width: 100%;
      line-height: px2vh(30);
      border-radius: px2vh(5);
      font-size: px2vh(13);
      height: px2vh(30);
    }
  .sortItemValue{
    margin-top: px2vh(10);
    text-align: center;
    width: 100%;
    line-height: px2vh(30);
    border-radius: px2vh(5);
    font-size: px2vh(13);
    height: px2vh(30);
  }
}
#lineChart{
  border-radius: px2vh(5);
  background-color: #fff;
  margin-top: px2vh(20);
  //min-width:px2vw(1445);
  width: 100%;
  //width: px2vw(1445);
  height: px2vh(300);
}
.bottomWrap{
  margin-top: px2vh(20);
}
</style>
